<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <div class="formDiv" style="float: left" v-show="saveIsShow">
                姓名：<input type="text" v-model="dataStudent.name">
                <br>
                生日: <input type="date" v-model="dataStudent.birthday">
                <br>
                <button @click="save">保存</button>
            </div>
            <div style="width:500px;margin: 0 auto">
                <input type="text" v-model="student.name"><button @click="loadData()">搜索</button>
                <button @click="saveIsShow=true">添加</button>
                <table border="1" width="500px">
                    <tr>
                        <th>id</th>
                        <th>姓名</th>
                        <th>操作</th>
                    </tr>

                    <tr v-for="(student,index) in students" :key="index">
                        <th>{{student.id}}</th>
                        <th>{{student.name}}</th>
                        <th>
                            <a href="javascript:void(0)" @click="findById(student.id)">编辑</a>
                            <a href="javascript:void(0)" @click="deleteById(student.id)">删除</a>
                        </th>
                    </tr>
                    <tr>
                        <td colspan="3" align="right">
                            <a href="javascript:void(0)" @click="prePage">上一页</a>
                            <a href="javascript:void(0)" @click="nextPage">下一页</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            student:{},
            students:[],
            start:1,
            totalPage:0,
            dataStudent:{},
            saveIsShow:false
        },
        created(){
           this.loadData()
        },
        methods:{
            loadData(){
                //请搜数据
                // let _this = this
               /* axios.get("./findAll").then(function(res){
                    console.log(res.data)
                    console.log(this,2)
                    _this.students = res.data
                })*/
                axios.post(`./findPage?start=${this.start}`,this.student).then((res)=>{
                    this.students = res.data.list
                    this.totalPage = res.data.pages
                })
            },
            save(){
                let id = this.dataStudent.id
                let url = ""
                if(id){
                    url ="./update"
                }else{
                    url ="./save"
                }
                axios.post(url,this.dataStudent).then((res)=>{
                    if(res){
                        this.saveIsShow = false
                        this.loadData()
                    }
                }).catch(()=>{

                })
            },
            findById(id){
                axios.get(`./findById/${id}`).then((res)=>{
                   this.dataStudent = res.data
                    this.saveIsShow = true
                    let formatDate = moment(new Date(this.dataStudent.birthday)).format("YYYY-MM-DD");
                    this.dataStudent.birthday = formatDate
                })
            },
            prePage(){
                this.start--
                if(this.start<1){
                    this.start = 1
                }
                this.loadData()
            },
            nextPage(){
                this.start++
                if(this.start > this.totalPage){
                    this.start = 1
                }
                this.loadData()
            }
        }
    })
</script>
</html>